import React, { Component } from 'react';
import "./App.css";
import ToDoFooter from './components/ToDoFooter';
import ToDoHeader from './components/ToDoHeader';
import ToDoMain from './components/ToDoMain';
import { useState, useEffect } from 'react'

function App() {
    const [todo, setTodo] = useState([
        {
            // 唯一标识
            id: Math.random().toString(36).slice(2),
            // 标题
            title: "金庸",
            // 是否被选中
            isChecked: true
        },
        {
            // 唯一标识
            id: Math.random().toString(36).slice(2),
            // 标题
            title: "古龙",
            // 是否被选中
            isChecked: false
        }
    ])

    function useChangeIsCheckedById (id) {
        useEffect(()=>{
            todo.map(item=>{
                if(item.id === id) item.isChecked = !item.isChecked;
                return item
            })
        }, [])
    }
    return (
        <div className="todo-container">
            <div className="todo-wrap">
                <ToDoHeader></ToDoHeader>
                <ToDoMain useChangeIsCheckedById={useChangeIsCheckedById} todo={todo}></ToDoMain>
                <ToDoFooter></ToDoFooter>
            </div>
        </div>
    )
}

export default App;